<template>
  <scroll-view class="scroll-view" scroll-y>
    <video ref="videoRef" v-if="courseVideoExplain && courseVideoExplain.videoUrl" class="video-cover"
      :src="courseVideoExplain.videoUrl" :poster="courseVideoExplain.coverUrl" objectFit="contain" @error="onVideoError"
      :autoplay="true"></video>
    <!-- 选项标签 -->
    <uv-tabs class="uv-tabs" :list="[{ name: '课程详情' }, { name: '图文详解' }]" :activeStyle="{
      color: '#1e1e1e',
      fontWeight: 'bold',
      fontSize: '32rpx'
    }" :inactiveStyle="{
      color: '#1e1e1e',
      fontSize: '32rpx'
    }
      " lineColor="#000" :current="acitveIndex" @change="tabsChange"></uv-tabs>
    <view class="details-container">

      <!-- 课程详情 -->
      <view class="course-details" v-if="acitveIndex == 0">
        <view class="course-title-desc">
          <view class="course-title">
            {{ courseVideoExplain?.title }}
          </view>
          <view class="course-desc">
            {{ courseVideoExplain?.describe }}
          </view>
        </view>
        <div class="page-gap"></div>
        <view class="course-list">
          <view class="course-list-title">
            课程列表
          </view>
          <view class="course-list-items">
            <view class="course-list-item" v-for="(item, index) in courseVideoExplainList" :key="index"
              @tap="onCourseListItemClick(item.id!)">
              <image class="course-list-item-cover" :src="item.coverUrl" mode="scaleToFill" />
              <view class="course-list-item-name" :class="index == activeCourseVideoExplainIndex ? 'active' : ''">{{
                item.title }}</view>
              <view class="exam-video-play-btn icon-play-filled"></view>
            </view>
          </view>
        </view>
      </view>
      <!-- 图文详解 -->
      <view class="image-text-details" v-else>
        <view class="image-text-details-title">
          {{ courseVideoExplain?.title }}
        </view>
        <uv-parse :content="courseVideoExplain?.imageText"></uv-parse>
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
  import type { CourseVideoExplainVo } from '@/api/course/types'
  import { ref, watch } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { useBaseTypeName, useBaseInfo } from '@/composables/LearnBase'
  import { getCourseVideoExplainListApi, getCourseVideoExplainApi } from '@/api/course'

  // 题库信息
  const baseInfo = useBaseInfo()
  // 当前选中标签的索引
  const acitveIndex = ref<number>(0)
  // 视频讲解信息Id
  const courseVideoExplainId = ref<number>()
  // 视频讲解信息
  const courseVideoExplain = ref<CourseVideoExplainVo>()
  // 视频讲解信息列表
  const courseVideoExplainList = ref<CourseVideoExplainVo[]>()
  // 当前播放的视频
  const activeCourseVideoExplainIndex = ref<number>()
  onLoad(async (optons: any) => {
    let baseType = optons.baseType
    courseVideoExplainId.value = optons.id

    await Promise.all([getCourseVideoExplain(courseVideoExplainId.value!), getCourseVideoExplainList(baseType)])
  })

  /**
   *获取课程视频讲解
   * @param id
   */
  const getCourseVideoExplain = async (id: number) => {
    let result = await getCourseVideoExplainApi(id)
    courseVideoExplain.value = result.data
  }

  /**
   *获取课程视频讲解列表
   * @param baseType
   */
  const getCourseVideoExplainList = async (baseType: string) => {
    let result = await getCourseVideoExplainListApi(baseInfo.driveType!, baseType)
    courseVideoExplainList.value = result.data
  }

  // 选项发生了变化
  const tabsChange = (item: any) => {
    acitveIndex.value = item.index
  }
  // 点击切换
  const onCourseListItemClick = (id: number) => {
    uni.showLoading({
      title: "加载中"
    })
    getCourseVideoExplain(id).then(() => {
    }).finally(() => {
      uni.hideLoading()
    })
  }
  watch(() => courseVideoExplain.value, () => {
    if (courseVideoExplain.value) {
      uni.setNavigationBarTitle({
        title: `${useBaseTypeName(courseVideoExplain.value.baseType!)}${courseVideoExplain.value.title!}`
      })
      let findIndex = courseVideoExplainList.value?.findIndex(item => item.id === courseVideoExplain.value?.id)!
      if (findIndex >= 0) {
        activeCourseVideoExplainIndex.value = findIndex!
      }
    }
  }, {
    immediate: true,
  })
  const onVideoError = ((e: any) => {
    console.log(e)
  })
</script>

<style lang="scss" scoped>
  .scroll-view {
    display: flex;
    flex-direction: column;
  }

  .video-cover {
    width: 100%;
  }

  .uv-tabs {
    border-bottom: 2rpx solid #f7f6f9;
  }

  .details-container {

    .course-details {
      .course-title-desc {
        margin-top: 30rpx;
        padding: 0 20rpx;

        .course-title {
          font-size: 36rpx;
          color: #1a191f;
          font-weight: bold;
        }

        .course-desc {
          margin: 20rpx 0rpx;
          font-size: 26rpx;
          color: #8b8b8b;
          line-height: 1.5;
        }
      }

      .course-list {
        padding: 20rpx 20rpx 30rpx;

        .course-list-title {
          font-size: 36rpx;
          color: #1a191f;
          font-weight: bold;
        }

        .course-list-items {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          align-content: space-between;

          .course-list-item {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 40rpx;

            .course-list-item-cover {
              width: 330rpx;
              height: 200rpx;
              border-radius: 7rpx;
            }

            .course-list-item-name {
              margin-top: 21rpx;
              font-size: 28rpx;
              color: #1e1e1e;

              &.active {
                font-weight: bold
              }
            }

            .exam-video-play-btn {
              position: absolute;
              left: 35%;
              top: 25%;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: rgba(0, 0, 0, .3);
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
              color: #fff;
              font-size: 40rpx;

              &::before {
                margin-left: 10rpx;
              }
            }
          }
        }

      }
    }

    .image-text-details {
      padding: 0 20rpx;
      font-size: 28rpx;
      line-height: 1.5;

      .image-text-details-title {
        margin: 30rpx 0 20rpx;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
  }

  .page-gap {
    height: 20rpx;
    background-color: #f7f7f7;
  }
</style>
